<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="12">
          <el-input v-model="search" placeholder="搜索" />
        </el-col>
        <el-col :span="12">
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button type="danger" @click="deleteSelected">删除</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table :data="displayedData" stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="code" label="维修编号" />
        <el-table-column prop="content" label="维修内容" />
        <el-table-column prop="workId" label="修理员" />
        <el-table-column prop="repairStatus" label="维修状态" />
        <el-table-column prop="housesId" label="房屋编号" />
        <el-table-column prop="createDate" label="创建时间" />
        <el-table-column label="操作">
          <template #default="scope">
            <span
              style="font-size: 12px; color: #2561ef"
              @click="showRepairInfo(scope.row)"
            >
              查看
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
      />
    </el-main>
  </el-container>
  <!-- 弹窗组件 -->
  <repair-info-dialog ref="repairInfoDialog" />
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus' // 导入Element Plus的消息提示模块
import repairInfoDialog from './maintainperson.vue'
import { getAll, getPepairById } from '@/api/maintain' // 导入API方法

export default {
  name: 'RepairList',
  components: {
    repairInfoDialog,
  },
  setup() {
    const search = ref('')
    const tableData = ref([])
    const total = ref(0)
    const currentPage = ref(1)
    const pageSize = ref(5)
    const repairInfoDialog = ref(null)

    // 计算当前页面要显示的数据
    const displayedData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return tableData.value.slice(start, end)
    })

    const fetchData = () => {
      if (search.value.trim() !== '') {
        // 按ID查询
        getPepairById(search.value)
          .then(response => {
            console.log('Response Data:', response.data) // 添加调试信息
            tableData.value = [response.data] // 假设返回的是单个对象
            total.value = tableData.value.length
            console.log('Updated Table Data:', tableData.value) // 检查更新后的数据
          })
          .catch(error => {
            console.error('Failed to fetch data:', error)
            ElMessage.error('查询失败，请检查输入的ID')
          })
      } else {
        // 查询全部数据
        getAll()
          .then(res => {
            console.log('All Data:', res.data) // 添加调试信息
            tableData.value = res.data
            total.value = tableData.value.length
            console.log('Updated Table Data:', tableData.value) // 检查更新后的数据
          })
          .catch(error => {
            console.error('Failed to fetch all data:', error)
            ElMessage.error('加载数据失败')
          })
      }
    }
    const handleCurrentChange = val => {
      currentPage.value = val
      // 强制重新加载数据
      fetchData()
    }

    const deleteSelected = () => {
      // 这里可以实现删除选中的行
      // 示例：删除选中的行
      let selectedRows = []
      tableData.value.forEach(row => {
        if (row.selected) {
          selectedRows.push(row)
        }
      })
      selectedRows.forEach(row => {
        const index = tableData.value.indexOf(row)
        tableData.value.splice(index, 1)
      })
      total.value -= selectedRows.length
    }

    const showRepairInfo = repairInfo => {
      if (repairInfoDialog.value) {
        repairInfoDialog.value.showRepairInfo(repairInfo)
      }
    }

    onMounted(async () => {
      try {
        const res = await getAll()
        tableData.value = res.data
        total.value = tableData.value.length
      } catch (error) {
        console.error('Failed to load initial data:', error)
        ElMessage.error('初始化数据加载失败')
      }
    })

    return {
      search,
      tableData,
      total,
      currentPage,
      pageSize,
      displayedData,
      fetchData,
      handleCurrentChange,
      deleteSelected,
      showRepairInfo,
    }
  },
}
</script>

<style scoped>
/* 样式 */
</style>
